<template>
	<view class="content">
		<view class="type-shuoming">
			<view class=""><text style="background: #B4C22D;"></text> 客户待取鞋</view>
			<view class=""><text style="background: #c20003;"></text> 配送员待取鞋</view>
			<view class=""><text style="background: #EEEEEE;"></text> 已禁用</view>
		</view>
		<u-collapse :item-style="itemStyle">
				<u-collapse-item  v-for="(item, index) in itemList" :key="index" :open="item.open" :disabled="item.disabled">
					<view slot="title">
						<view class="title">
							<view class="name">{{ item.cabinet.name }}</view>
							<view class="cun">
								<view>待取(<text>{{ item.order_num }}</text>)</view>
									<!-- <view>待存(<text>10</text>)</view> -->
							</view>
						</view>
					</view>
					
					
					<view class="item-content">
						
						<view class="item-content-li" :class="{'open':items.status == 1 && items.use_status == 1,'jinyong':items.status == 3,'ziji':items.type == 2}" v-for="(items,indexs) in item.shoecase" :key="indexs">
							<image class="weidakai"  src="https://www.sdxiecheng.cn/img/weidakai.png" mode="heightFix"></image>
							<text v-if="items.status == 1 && items.use_status == 0">{{ items.name }}号柜</text>
							<text v-if="items.status == 1 && items.use_status == 1">有鞋</text>
							<text v-if="items.status == 3">已禁用</text>
						</view>
						<!-- <view class="item-content-li">
							<image class="weidakai" style="display: none;" src="http://shoe-orange.laiwang.work/img/weidakai.png" mode="heightFix"></image>
							<image class="yidakai" src="http://shoe-orange.laiwang.work/img/yidakai.png" mode="heightFix"></image>
							<text>02 号柜</text>
						</view> -->
					</view>
				</u-collapse-item>
		</u-collapse>
		
		
		<!-- <u-tabbar :list="tabbar" :before-switch="beforeSwitch" :mid-button="true" :border-top="false"  mid-button-size="110" active-color="#FF9A33" inactive-color="#999999"></u-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uView',
				headStyle:{
					
				},
				itemStyle:{
					'background': '#fff',
					'margin-bottom': '10rpx',
					'border-radius': '10rpx'
				},
				tabbar: '',
				itemList: [],
			}
		},
		onLoad() {
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
			 */
			this.tabbar = this.$store.state.tabbar
		},
		onShow() {
			this.getHome()
		},
		methods:{
			beforeSwitch(index){
				console.log(index)
				if(index != 1){
					return true
				}else{
					this.saoma()
					return false
				}
			},
			saoma(){
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url:'/pages/service/service'
						})
					}
				});
			},
			//获取首页鞋柜状态
			 getHome(){
				 uni.$u.http.post('/delivery/delivery_index').then(res =>{
					 console.log(res.data)
					 res.data.forEach((item,index) =>{
						 if(index == 0){
							 item.open = true
						 }else{
							 item.open = false
						 }
					 })
					 this.itemList = res.data
				}).catch(err =>{
					uni.showModal({
						title: '温馨提示',
						showCancel:false,
						content: err.data.msg,
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'../login/login'
								})
								// console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
			 }
		}
		
	}
</script>

<style lang="less">
	.content{
		height: 100%;
		// min-height: 100vh;
		position:relative;
		// background-image:linear-gradient(0deg, #F9F9F9, #FBAA27);
		background-size:100% 210rpx;
		background-repeat: no-repeat;
		padding-bottom: 20rpx;
		background-color: #F9F9F9;
		padding: 0 20rpx;
	}
	.item-content{
		padding: 0 10rpx;
		padding-top: 20rpx;
		padding-bottom: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.item-content-li{
			width: 50%;
			height: 116rpx;
			border-right: 1px solid rgba(124, 124, 124, 0.5);
			border-bottom: 1px solid rgba(124, 124, 124, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}
			&:nth-child(2n){
				border-right: 0;
			}
			&:nth-last-child(1){
				border-bottom: 0;
			}
			&:nth-last-child(2){
				border-bottom: 0;
			}
			image{
				height: 49rpx;
			}
			.weidakai{
				margin-right: 42rpx;
			}
			.yidakai{
				margin-right: 18rpx;
			}
		}
		.open{
			background: #c20003;
			color: #FFFFFF;
			text{
				// color: #FFFFFF;	
			}
		}
		.jinyong{
			background: #EEEEEE;
			// color: #FFFFFF;
			text{
				// color: #FFFFFF;	
			}
		}
		.ziji{
			background: #B4C22D;
			text{
				// color: #FFFFFF;	
			}
		}
	}
	.title{
		width: 622rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 22rpx;
		position: relative;
		overflow: hidden;
		&::after{
			content: '';
			width: 20rpx;
			height: 20rpx;
			background: #FBAA27;
			position: absolute;
			left: -10rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.name{
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}
		.cun{
			display: flex;
			align-items: center;
			color: #7C7C7C;
			font-size: 24rpx;
			view{
				margin-left: 20rpx;
			}
			text{
				color: #FBAA27;
			}
		}
	}
	.type-shuoming{
		padding: 15rpx 0;
		display: flex;
		justify-content: space-around;
		view{
			// color: #FFFFFF;
			display: flex;
			align-items: center;
		}
		text{
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 10rpx;
			
			display: block;
		}
	}
</style>
